<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="refund">
		<view class="refund-order">
			<view class="refund-order-ordersn">商品编号是:{{orderBase.id}}</view>
			<view class="refund-order-goods">
				<image class="refund-order-goods-img" :src="orderItem.productSkuPic"></image>
				<view class="refund-order-goods-info">
					<view class="refund-order-goods-info-desc">
						<view>{{orderItem.productName}}</view>
						<view>¥{{orderItem.productPrice}}</view>
					</view>
					<view class="refund-order-goods-info-desc">
						<view>编号:{{orderItem.productId}}</view>
						<view>X{{orderItem.productQuantity}}</view>
					</view>
					<view class="refund-order-goods-info-desc">
						<view v-if="orderItem.productAttr">规格:{{orderItem.productAttr | format}}</view>
					</view>
				</view>
			</view>
			<view class="refund-order-goods-amount">合计:¥{{orderItem.totalPrice}}</view>
		</view>

		<view class="refund-choose">
			<view class="refund-choose-demo">
				<view class="refund-choose-demo-desc">请选择退单数量:</view>
				<view class="refund-choose-demo-operate">{{orderItem.productQuantity}}</view>
			</view>
			<view class="refund-choose-demo">
				<view class="refund-choose-demo-desc">请输入退货原因:</view>
				<input v-model="reason" class="refund-choose-demo-input" type="text" placeholder="请输入退货原因" />
			</view>
			<view class="refund-choose-demo">
				<view class="refund-choose-demo-desc">请选择退货地址:</view>
				<picker class="refund-choose-demo-operate" mode="selector" :range="address" range-key="addressName"
					@change="changeAddress" :value="current">
					<view v-if="address.length">{{address[this.current].addressName}}</view>
				</picker>
			</view>
			<view class="refund-choose-demo refund-choose-textarea">
				<view class="refund-choose-demo-desc">请输入问题描述:</view>
				<textarea v-model="description" class="refund-choose-demo-input" placeholder="请输入问题描述" />
			</view>

			<view class="refund-choose-tip">
				<view class="refund-choose-tip-title">温馨提示:</view>
				<view class="refund-choose-tip-desc">上传图片总大小不能超过3M,单个文件大小不能超过1M,图片总个数不能超过3张</view>
			</view>

			<view class="refund-choose-imgs">
				<view @tap="chooseImg" class="refund-choose-imgs-upload">
					<view class="refund-choose-imgs-upload-add">+</view>
					<view class="refund-choose-imgs-upload-desc">上传图片</view>
				</view>
				<view class="refund-choose-imgs-upload" v-for="item in imgs" :key="item">
					<image class="refund-choose-imgs-upload-img" :src="item"></image>
					<view @tap="deleteImg(item)" class="refund-choose-imgs-upload-close">x</view>
				</view>
			</view>
		</view>

		<view @tap="submitReturn" class="refund-submit">提交</view>
	</view>
</template>

<script>
	import {
		getPreOrderById as getPreOrderByIdApi,
		getCompanyAddrss as getCompanyAddrssApi,
		addOrderReturnApply as addOrderReturnApplyApi
	} from '../../../../api/common/index.js'
	import {
		showTip
	} from '../../../../utils/index.js'
	import baseUrl from '../../../../api/baseUrl.js'
	export default {
		data() {
			return {
				current: 0,
				orderId: '',
				orderBase: {},
				orderItems: [],
				goodsId: '',
				orderItem: {},
				address: [], //退货地址
				imgs: [],
				description: '', //问描描述
				reason: '', //退单原因
			}
		},
		filters: {
			//过滤器处理规格sku
			format(value) {
				value = JSON.parse(value);
				var str = "";
				value.forEach(ele => {
					str += ele.key + ':' + ele.value + ' ';
				})
				return str
			},
		},
		onLoad(config) {
			this.orderId = config.orderId ? config.orderId : uni.getStorageSync('orderId');
			this.goodsId = config.goodsId ? config.goodsId : uni.getStorageSync('goodsId');
			this.getOrderDetail();
			this.getReturnAddress();
		},
		methods: {
			//提交退单
			submitReturn() {
				var promiseArr=[];
				this.imgs.forEach(ele=>{
					let promise=new Promise((resolve,reject)=>{
						uni.uploadFile({
							url:baseUrl+'/lejuClient/orderReturn/uploadImg',
							name:'file',
							timeout:5000,
							filePath:ele,
							success(res) {
								resolve(res)
							},
							fail(err){
								reject(err)
							}
						})
						
					})
					promiseArr.push(promise);
				})
				var imgsArr=[];
				Promise.all(promiseArr).then(res=>{
					res.forEach(ele=>{
						imgsArr.push(JSON.parse(ele.data).data.fileUrl);
					})
					addOrderReturnApplyApi({
							"companyAddressId":this.address[this.current].id,
							"count":this.orderItem.productQuantity ,
							"description": this.description,
							"orderId": this.orderId,
							"orderItemId":this.goodsId ,
							"proofPics": imgsArr.join(','),
							"reason": this.reason
						})
						.then(res => {
							console.log('退单结果', res);
							uni.navigateTo({
								url:'../orderDetail'
							})
						})
				})
				
			},
			//删除图片
			deleteImg(item) {
				var idx = this.imgs.findIndex(ele => ele == item);
				this.imgs.splice(idx, 1);
			},
			//选择图片
			chooseImg() {
				var _this = this;
				uni.chooseImage({
					success(res) {
						console.log('图片', res);
						var imgs = res.tempFiles;

						for (var i = 0; i < imgs.length; i++) {
							if (1 * 1024 * 1024 < imgs[i].size) {
								showTip('不允许提交1M以上的图片!', 'error')
								return;
							}
						}
						if (imgs.length + _this.imgs.length > 3) {
							showTip('最多允许提交3张图片', 'error')
							return;
						}
						imgs = imgs.map(ele => ele.path);
						_this.imgs.push(...imgs);
						console.log('this.imgs==>', _this.imgs);
					}
				})
			},
			//改变选择地址
			changeAddress(e) {
				this.current = e.detail.value;
				console.log('地址选择', this.current);
			},
			//获取退货地址
			getReturnAddress() {
				getCompanyAddrssApi()
					.then(res => {
						this.address = res.data.items;
						console.log('退货地址', this.address);
					})
			},
			//获取订单详情
			getOrderDetail() {
				getPreOrderByIdApi(this.orderId)
					.then(res => {
						this.orderBase = res.data.orderBase;
						this.orderItems = res.data.orderItems;
						console.log('订单详情', this.orderBase);
						this.orderItem = this.orderItems.find(ele => ele.id == this.goodsId);
						console.log('this.orderItem===>', this.orderItem);
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refund {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #f1ece7;

		&-order {
			background-color: #FFFFFF;
			box-sizing: border-box;
			width: 100%;
			padding: 30rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #8d8d8d;

			&-ordersn {
				color: #333;
				line-height: 80rpx;
				border-bottom: 1rpx solid gray;
			}

			&-goods {
				display: flex;
				width: 100%;
				align-items: center;
				border-bottom: 1rpx solid gray;
				box-sizing: border-box;
				padding: 20rpx 0;

				&-img {
					display: block;
					width: 162rpx;
					height: 162rpx;
					margin-right: 15rpx;
					flex: none;
				}

				&-info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;

					&-desc {
						display: flex;
						justify-content: space-between;
					}

					&-desc:first-child {
						color: #333333;
						margin-bottom: 15rpx;
					}
				}

				&-amount {
					display: flex;
					justify-content: flex-end;
					margin-top: 15rpx;
					color: #333333;
				}
			}
		}

		&-choose {
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 30rpx;
			font-size: 28rpx;
			background-color: #FFFFFF;

			&-demo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid gray;

				&-desc {
					width: 290rpx;
				}

				&-operate {
					flex: 1;
					text-align: right;
				}

				&-input {
					text-align: right;
				}
			}

			&-textarea {
				height: 300rpx;
				align-items: flex-start;
				line-height: 100rpx;

				::v--deep .textarea-placeholder {
					top: 18rpx;
				}
				::v-deep .uni-textarea-placeholder{
					top: 18rpx;
				}
			}

			&-tip {
				margin-top: 15rpx;
				margin-bottom: 30rpx;

				&-title {
					font-weight: 700;
				}

				&-desc {
					color: #000000;
					font-size: 27rpx;
				}
			}

			&-imgs {
				width: 100%;
				display: flex;

				&-upload {
					position: relative;
					display: block;
					width: 120rpx;
					height: 120rpx;
					margin-right: 15rpx;

					&-img {
						display: block;
						width: 120rpx;
						height: 120rpx;
					}

					&-close {
						position: absolute;
						right: -12rpx;
						top: -12rpx;
						background-color: red;
						border-radius: 50%;
						width: 34rpx;
						height: 34rpx;
						text-align: center;
						line-height: 30rpx;
						color: gray;
					}

					&-add {
						text-align: center;
						font-size: 70rpx;
						font-weight: 300;
					}

					&-desc {
						color: #666666;
					}
				}
			}
		}

		&-submit {
			width: 536rpx;
			height: 94rpx;
			margin: 60rpx auto 60rpx;
			background-color: #354e44;
			text-align: center;
			line-height: 94rpx;
			color: #FFFFFF;
			border-radius: 49rpx;
		}
	}
</style>
